<template>
  <input type="text" :value="msg" @input="message">
</template>

<script>
import { ref, watch } from 'vue-demi'
export default {
  name: 'Hinput',
  props: {
    modelValue: {
      type: String
    }
  },
  setup (props, { emit }) {
    // 响应数据
    const msg = ref(props.modelValue)
    // 监听传递过来的父组件的属性
    watch(() => props.modelValue, () => {
      msg.value = props.modelValue
    })

    // 监听input输入框的数据
    function message (e) {
      // 事件对象参数
      console.log(e.target.value)
      // vue3 的方法传递给父组件
      emit('update:modelValue', e.target.value)
    }
    return {
      msg,
      message
    }
  }
}
</script>
